 /*
 *填空题收集
  */
<template>
  <div id="select_topic">
    <div>
      <!-- 填空题题目 -->
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>
            二 、填空题 ( 本题共{{testPaperInfo.tkq.length}}道小题,共
            <span class="topic-grade">{{selectTopicM}}/{{sums}}</span>分 )
          </span>
        </div>
        <div>
          <div v-for="(item,i) in testPaperInfo.tkq" :key="i" class="item">
            <el-form :model="item" label-width="100px" class="demo-ruleForm">
              <el-form-item v-show="!item.editing">
                <div slot="label">{{i+1}}、</div>
                <span v-for="(txt,ind) in item.tpqQuestion.questionTitle.split('▁')" :key="ind">
                  <span
                    v-html="txt+(item.tpqQuestion.fillQuestion.length>ind?`<input readonly class='tkAnwsers' value='${item.tpqQuestion.fillQuestion[ind].fqAnswer}' />`:``)"
                  ></span>
                  <el-input-number
                    v-if="item.tpqQuestion.fillQuestion.length>ind"
                    v-model="item.tpqQuestion.fillQuestion[ind].fillQuestionScore[0].fqsScore"
                    :min="0"
                    size="mini"
                    @change="scoreChange(item)"
                  ></el-input-number>
                </span>
              </el-form-item>
              <div v-show="item.editing">
                <el-form-item label="题干">
                  <el-button round size="small" @click="changeSpace(item)">插入题空</el-button>
                </el-form-item>
                <el-form-item label>
                  <el-input
                    type="textarea"
                    v-model="item.tpqQuestion.questionTitle"
                    @input="ipt($event,item.tpqQuestion)"
                    autosize
                  ></el-input>
                </el-form-item>
                <el-form-item
                  v-for="(ele,index) in item.tpqQuestion.fillQuestion"
                  :key="index"
                  label="temp"
                >
                  <div slot="label" class="orderNum">{{index+1}}</div>
                  <el-input
                    v-model="ele.fqAnswer"
                    :placeholder="`请输入第${index+1}个空的答案`"
                    size="small"
                  ></el-input>
                </el-form-item>
                <el-form-item label="题目预览">
                  <span
                    v-for="(txt,indexs) in item.tpqQuestion.questionTitle.split('▁')"
                    :key="indexs"
                    v-html="txt+(item.tpqQuestion.fillQuestion.length>indexs?`<input readonly class='tkAnwsers' value='${item.tpqQuestion.fillQuestion[indexs].fqAnswer}' />(${item.tpqQuestion.fillQuestion[indexs].fillQuestionScore[0].fqsScore}分)`:'')"
                  ></span>
                </el-form-item>
              </div>
              <el-form-item label>
                <el-button round size="small" @click="editingFq(item)">编辑</el-button>
                <el-button round size="small" @click="escEdit(i)" v-show="item.editing">取消</el-button>
                <el-button
                  round
                  size="small"
                  @click="submitEditFq(item)"
                  v-show="item.editing"
                  type="primary"
                  plain
                >保存修改</el-button>
                <el-button
                  round
                  size="small"
                  @click="delFq(item,i)"
                  v-show="item.editing"
                  type="danger"
                  plain
                >删除题目</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        
      </el-card>
    </div>
  </div>
</template>
<script>
export default {
   props: ["teStPaperInfo","sum"],
  data() {
    return {
        testPaperInfo:{
          tkq:[]
        },
        sums:0
    };
  },
 methods:{
   //编辑
   editingFq(obj) {
      //填空题编辑按钮
      obj.editing = true; //更改编辑状态
      obj.primeval = JSON.parse(JSON.stringify(obj)); //将原始题目信息暂存
    },
    //取消编辑
     escEdit(i) {
      let primaryInfo=this.testPaperInfo.tkq[i].primeval
      primaryInfo.editing = false; //更改编辑状态
      this.$set(this.testPaperInfo.tkq, i, primaryInfo); //将当前题目信息还原为原始题目信息
    },
     ipt(e, item) {
      //input事件 编辑题目题干
      if (e.split("▁").length - 1 < item.fillQuestion.length) {
        //e是input当前输入的值
        item.fillQuestion.pop(); //如果题干的标识符数量小于题空数组的长度，则删除题空数组最后一个元素
      }
    },
    // 插入空题
    changeSpace(item) {
      //编辑题目的插入题空事件
      item.tpqQuestion.questionTitle += "▁"; //题干添加标识符
      item.tpqQuestion.fillQuestion.push({
        //题空数组追加对象
        fqOrder: item.tpqQuestion.fillQuestion.length + 1, //题目序号为题空数组原长度+1
        fqAnswer: "", //新增题空答案
        fillQuestionScore: [{ fqsScore: 2 }] //填空分数
      });
    },
    //保存修改
    submitEditFq(obj) {
      //保存修改事件
      let primaryVal=obj.primeval //获取原始数据
      obj.tpqQuestion.questionTitle=obj.tpqQuestion.questionTitle.trim()
      delete obj["primeval"]; //从对象中删去添加的原始数据
      let infoChange = JSON.stringify(obj) === JSON.stringify(primaryVal); //判断题目数据是否变化
      let newQuestion = obj.tpqQuestion;
      if (infoChange) {
        this.$message.warning("数据没有变化");
      } else if (!newQuestion.questionTitle.trim()) {
        this.$message.warning("请输入题干信息");
      } else if (newQuestion.fillQuestion.length <= 0) {
        this.$message.warning("请输入填空信息");
      } else {
        let k = true;
        for (let i = 0; i < newQuestion.fillQuestion.length; i++) {
          if (newQuestion.fillQuestion[i].fqAnswer.trim() == "") {
            this.$message.warning(`请输入填空项${i + 1}的信息`);
            k = false;
            break;
          }
        }
        if (k) {
          let newFq = newQuestion.fillQuestion.map(item => {
            return {
              fqAnswer: item.fqAnswer, //填空答案
              fqOrder: item.fqOrder, //填空的序号
              fqId: item.fqId //填空题id
            };
          });
          let newData = {
            questionId: newQuestion.questionId, //问题id
            questionTitle: newQuestion.questionTitle, //题干
            questionTypeId: newQuestion.questionTypeId, //题目类型
            fillQuestion: newFq //填空题数组
          };
          this.axios
            .post(
              "/api/TestPaper/ModifyQuestion?paperQuestionId=" +
                obj.tpqId,
              newData
            )
            .then(res => {
              if (res.data.code == 1) {
                this.$message.success(res.data.message);
              } else {
                console.log(res.data);
                this.$message.warning(res.data.message);
              }
              obj.editing = false;
            })
            .catch(err => console.log(err));
        }
      }
    },
    scoreChange(obj) {
      //修改分数方法
      let tpqScore = 0; //定义初始分数
      obj.tpqQuestion.fillQuestion.forEach(i => {
        //计算修改后的当前题目总分
        tpqScore += i.fillQuestionScore[0].fqsScore;
      });
      let fillQuestionScore = obj.tpqQuestion.fillQuestion.map(m => {
        //小空分数数组
        return m.fillQuestionScore[0];
      });
      let newScore = {
        tpqId: obj.tpqId, //主键编号
        tpqScore, //一个题的分值
        fillQuestionScore //一个题里每个填空的分值
      };
      this.axios.post("/api/TestPaper/ModifyScore", newScore).then(res => {
        if (res.data.code == 1) {
          //请求数据，判断返回状态
          this.$message.success(res.data.message);
        } else {
          this.$message.info(res.data.message);
        }
      });
    },
    // 删除
    delFq(item,i) {
      let _this=this
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        _this.axios
          .post(
            "/api/TestPaper/RemoveQuestionFromTestPaper?paperQuestionId=" +
              item.tpqId
          )
          .then(res => {
            if (res.data.code==1) {
              _this.testPaperInfo.tkq.splice(i,1) //更新数组信息
              _this.$message.success(res.data.message);
            } else {
              _this.$message.warning(res.data.message);
            }
          });
      }).catch((e)=>{
        console.log(e)
      });
    },
    setGapM(){
      this.$emit('gapM',this.selectTopicM)
    }
 },
 computed: {
    //选择题小题分数
    selectTopicM() {
      let _this = this;
      // 迭代所有的元素最终返回一个值
      let m = _this.testPaperInfo.tkq.reduce((sum, item) => {
        return sum + item.tpqQuestion.fillQuestion.reduce((sumx,itemx)=>{
           return  sumx+itemx.fillQuestionScore.reduce((sums,items)=>{
           return  sums+items.fqsScore
        },0) 
        },0) 
      }, 0);
      return m;
    }
    
  },
 watch: {
    teStPaperInfo(newVal) {
      //把父组件传过来的数据转换为字符串 ---- 这转换为对象 ---就可以进行操作了
      let newVal1 = JSON.parse(JSON.stringify(newVal));
       this.testPaperInfo.tkq=newVal1.questions.filter(item=>item.tpqQuestion.questionTypeId == 2);//按照题型进行分组
    },
    sum(newVal){
      this.sums=parseInt(newVal)
    }
  },
  updated() {
   this.setGapM()
  }
};
</script>
<style lang="less" scoped>
// 选择题目试卷类容
.topic-grade {
  background-color: #f56c6c;
  border-radius: 10px;
  color: #fff;
  display: inline-block;
  font-size: 12px;
  height: 18px;
  line-height: 18px;
  padding: 0 6px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #fff;
}

.tkquestion {
  /deep/.el-form-item {
    margin-bottom: 0px;
  }
}
.orderNum {
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  color: #fff;
  border-radius: 10px;
  background-color: #f56c6c;
  float: right;
  margin-top: 10px;
}
.tkqAnwserLine {
  display: flex;
  /deep/.el-input-number {
    margin-top: 5px;
  }
  /deep/.el-input:first-child input {
    border: none;
    border-bottom: 1px solid #ebeef5;
  }
}
/deep/ .tkAnwsers {
  width: 169px;
  outline: none;
  border: none;
  text-align: center;
  border-bottom: 1px solid #ccc;
  height: 20px;
}
</style>